<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">
            var latitude;
            var longitude;
            function initialize() {

                var endereco = "Rua República da Argentina, 589, Cuiabá, MT";
                var nome = "Reginaldo";
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': endereco + ', Brasil', 'region': 'BR'}, function(results, status) {

                    if (status === google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            latitude = results[0].geometry.location.lat();
                            longitude = results[0].geometry.location.lng();

                            var myLatlng = new google.maps.LatLng(latitude, longitude);

                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                title: nome
                            });

                            var mapOptions = {
                                center: myLatlng,
                                zoom: 16,
                                mapTypeId: google.maps.MapTypeId.ROADMAP,
                            };
                            
                            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    mapOptions);
                                    
                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                title: nome
                            });
                            
                            marker.setMap(map);
                        }
                    }
                });
            }
        </script>
    </h:head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>

